<template>
    <div class="login-wrap">
        <h2>手机号登录</h2>
        <div>手机号</div>
        <div>
            <input type="text" placeholder="手机号" v-model="phone">
        </div>
        <button @click="getCode">获取验证码</button>
        <smsDialog :open="open" :phone="phone" @close="close"></smsDialog>
    </div>
</template>

<script>
import smsDialog from './components/smsDialog.vue'
export default {
    created(){
        console.log(this.$http)
    },
    data(){
        return {
            phone:'',
            open:false
        }
    },
    components:{
        smsDialog
    },
    methods:{
        async getCode(){
            if(/\d{11}/.test(this.phone)){
                //获取验证码
                let data = await this.$http.getCode(this.phone);
                if(data.code === 1){
                    this.open = true;//输入弹窗打开
                }
            }else{
                //信息提示的
            }
        },
        close(){
            this.open = false;
        }
    }
}
</script>

<style lang="scss" scoped>
    .login-wrap{
        @include size(80%,100%);
        overflow: hidden;
        margin:80px auto;
        button{
            @include size(80%,40px);
            background: $color-primary ;
            border-radius: 20px;
            border:none;
            outline: none;
            color:#fff;
        }
    }


</style>

